//引入Count的UI组件
// import CountUI from '../../components/Count'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/action/count_action'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import React, { Component } from 'react'


class Count extends Component {

	// state = {count:0}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber;
		this.props.jia(value*1);
		// store.dispatch({type:'increment',data:value*1});
		// const {count} = this.state
		// this.setState({count:count+value*1})

		// store.dispatch(createIncrementAction(value*1));
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1);
		// const {count} = this.state
		// this.setState({count:count-value*1})
		// store.dispatch({type:'decrement',data:value*1});
		// store.dispatch(createDecrementAction(value*1));
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1);
		}
		// const {count} = this.state
		// if(count % 2 !== 0){
		// 	this.setState({count:count+value*1})
		// }
		// const count1 = store.getState()
		// if( count1 % 2 !== 0){
			// store.dispatch({type:'increment',data:value*1});
			// store.dispatch(createIncrementAction(value*1));
		// }
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500);
		// const {count} = this.state
		// setTimeout(()=>{
		// 	// store.dispatch({type:'increment',data:value*1});
		// 	store.dispatch(createIncrementAction(value*1));
		// },500)

		// store.dispatch(createIncrementAsyncAction(value*1,500));
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.props.count},下方组件的人数为 {this.props.renshu}</h1>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}


/* 
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
	return {count:state.he,renshu: state.rens.length}
}

/* 
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(Count)

// 简写
// export default connect(
// state =>( {count:state})	
//  返回一个action，库会自动分发
// 	{
//		 jia: createIncrementAction();
//		 jian: createDecrementAction();
//		 jiaAsync: createIncrementAsyncAction()
// 	}
// )(CountUI)

